<template>
  <CommonCard title="累计用户数" :value="reportData.totalUser">
    <template #default>
      <v-chart :option="option"></v-chart>
    </template>
    <template #footer>
      <div class="wrapper">
        <div>
          <span>日同比</span>
          <span class="css-1">{{ reportData.userGrowLastDay }}%</span>
          <span
            :class="{
              increase: reportData.userGrowLastDay > 0,
              decrease: reportData.userGrowLastDay < 0,
            }"
          ></span>
        </div>
        <div>
          <span>月同比</span>
          <span class="css-1">{{ reportData.userGrowLastMonth }}%</span>
          <span
            :class="{
              increase: reportData.userGrowLastMonth > 0,
              decrease: reportData.userGrowLastMonth < 0,
            }"
          ></span>
        </div>
      </div>
    </template>
  </CommonCard>
</template>

<script setup>
import { ref,watch } from 'vue'
import CommonCard from './CommonCard.vue'

const props = defineProps({
  reportData: {
    type: Object,
    required: true,
  },
})
const option = ref({})
const renderChart = (v1, v2) => {
  option.value = {
    // 把y轴和x轴反过来
  xAxis: {
    type: 'value',
    show: false,
  },
  yAxis: {
    // y轴为类目轴
    type: 'category',
    show: false,
  },
  grid: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  series: [
    {
      type: 'bar',
      data: [v1],
      itemStyle: { color: 'green' },
      barWidth: '10',
      stack: 'total',
    },
    {
      type: 'bar',
      data: [v2],
      itemStyle: { color: '#ddd' },
      barWidth: '10',
      stack: 'total',
    },
    {
      type: 'custom', // 自定义形状
      data: [v1],
      renderItem: (params, api) => {
        // 设置三角形的点的坐标(x,y)
        const [x, y] = api.coord([api.value(0), 0])
        // 返回值, 用于创建自定义形状, y轴向下为正方向, x轴向右为正方向
        return {
          type: 'group', // 组(包含两个三角形)
          children: [
            {
              type: 'path',
              shape: {
                // 绘制: Y轴的正方向是向下的
                //d:'M0 0 L0 10 L10 10 L10 0 Z',// 绘制正方形
                // d: `M${x - 5} ${y - 10} L${x + 5} ${y - 10} L${x} ${y} Z`,
                d: 'M 10 10 L 30 10 L 20 30 z',//从点 (10, 10) 开始绘制
                x: x -5,//图形在 X 轴上的位置，相对于某个变量 x 向左偏移 5 个单位。
                y: 5,//图形在 Y 轴上的位置，固定为 5 个单位。
                width: 10,
                height: 10,
                layout: 'cover',
              },
              style: {
                fill: 'green',
              },
            },
            {
              type: 'path',
              shape: {
                d: 'M 10 10 L 30 10 L 20 -10 z',
                x: x - 5,
                y: 35,
                width: 10,
                height: 10,
                layout: 'cover',
              },
              style: {
                fill: 'green',
              },
            },
          ],
        }
      },
    },
  ],
  }
}
watch(props,()=>{
    renderChart(props.reportData.userLastMonth, props.reportData.userToday)
})

</script>

<style scoped>
.wrapper {
  display: flex;
  gap: 20px;
}
</style>
